<template>
  <div class="pd-le-ri">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <el-icon :size="11"><user-filled /></el-icon> 管理员列表
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div style="min-width: 700px; display: flex">
        <el-input
          v-model="managerName"
          placeholder="查询姓名"
          style="width: 300px"
        />
        <div style="margin: 0 20px">
          <el-button type="primary" @click="clickBtn">搜索</el-button>
        </div>
        <div style="margin: 0 20px">
          <el-button type="success" @click="dialogVisible = true"
            >新增管理员</el-button
          >
        </div>
      </div>
      <div style="margin: 20px 0 30px">
        <el-table
          :data="tableData.arr"
          border
          style="width: 100%"
          :stripe="true"
        >
          <el-table-column prop="accountNum" label="用户名" width="150" />
          <el-table-column
            prop="loginAddress"
            label="地址"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column prop="managerName" label="姓名" width="120" />
          <el-table-column
            prop="id"
            label="管理ID"
            width="180"
          ></el-table-column>
          <el-table-column prop="remarks" label="备注"></el-table-column>
          <el-table-column label="操作" width="280" align="center">
            <template v-slot="scope">
              <el-button type="danger" size="small" @click="removeAdmin(scope.row.id)">删除</el-button>
              <el-button
                size="small"
                v-if="scope.row.status == 0"
                @click="closeAdmin(scope.row.id)"
                >禁用</el-button
              >
              <el-button
                type="success"
                size="small"
                v-if="scope.row.status == 1"
                @click="openAdmin(scope.row.id)"
                >开启</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-bottom: 10px">
        <div class="demo-pagination-block">
          <el-pagination
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="填写管理员信息" width="30%">
      <el-form ref="login" label-width="80px" class="ms-content" :model="form">
        <el-form-item prop="accountNum" label="管理账号">
          <el-input placeholder="请输入管理账号" v-model="form.accountNum">
          </el-input>
        </el-form-item>
        <el-form-item prop="managerName" label="真实姓名">
          <el-input placeholder="请输入真实姓名" v-model="form.managerName">
          </el-input>
        </el-form-item>
        <el-form-item prop="managerTele" label="电话号码">
          <el-input
            placeholder="请输入管理员电话电话号码"
            v-model="form.managerTele"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="remarks" label="备注">
          <el-input placeholder="请输入备注信息" v-model="form.remarks">
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addAdmin">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { getmanager, newManager, changgeStatus,delAdmin } from "../../http/admin/admin";
import { UserFilled } from "@element-plus/icons";
import { ElMessageBox, ElMessage } from "element-plus";

export default defineComponent({
  components: {
    UserFilled,
  },
  setup() {
    interface message {
      accountNum: string;
      managerName: string;
      managerTele: string;
      remarks: string;
    }

    let form: message = reactive({
      accountNum: "",
      managerName: "",
      managerTele: "",
      remarks: "",
    });

    let tableData = reactive({
      arr: [],
    });
    let total = ref();
    let page: number = 1;
    let managerName = ref("");
    const dialogVisible = ref(false);

    onMounted(() => {
      getList();
    });

    const getList = async () => {
      const res: any = await getmanager(page, managerName.value);
      tableData.arr = res.data.records;
      total.value = res.data.total;
    };

    const handleCurrentChange = (e: number) => {
      page = e;
      getList();
    };

    const clickBtn = () => {
      getList();
    };

    const addAdmin = async () => {
      const res: any = await newManager(form);
      dialogVisible.value = false;
      getList();
    };

    const openAdmin = async (e: any) => {
      let changge = {
        managerId: e,
        status: 1,
      };
      const res: any = await changgeStatus(changge);
      getList();
    };

    const closeAdmin = async (e: any) => {
      let changge = {
        managerId: e,
        status: 0,
      };
      const res: any = await changgeStatus(changge);
      getList();
    };

    const removeAdmin = (e:any) => {
      ElMessageBox.confirm(
        "你确认删除该管理员吗?",
        "提示",
        {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(async() => {
        const params = {
            managerId:e
        }
        const res = await delAdmin(params)
        getList()
      });
    };

    return {
      managerName,
      tableData,
      total,
      form,
      dialogVisible,
      handleCurrentChange,
      clickBtn,
      addAdmin,
      openAdmin,
      closeAdmin,
      removeAdmin,
    };
  },
});
</script>

<style scoped>
</style>
